<template>
	<view class="points-goods-page">
		<!-- 标题栏 -->
		<view class="page-header">
			<text class="title">积分商城</text>
			<view class="decor-line">

			</view>
			<text class="points-text">我的积分：{{curPoints}}</text>
		</view>

		<!-- 商品列表 -->
		<scroll-view scroll-y class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-card">
				<!-- 商品图片 -->
				<image :src="_imgUrl + item.tupian" mode="aspectFill" class="goods-image" />

				<!-- 商品信息 -->
				<view class="goods-info">
					<text class="goods-name">{{ item.shangpinmingcheng }}</text>
					<view class="points-section">
						<text class="points-text">{{ item.jiage }}</text>
						<text class="points-label">积分</text>
					</view>
				</view>

				<!-- 兑换按钮 -->
				<view class="exchange-btn" @click="handleExchange(item)">
					<text>立即兑换</text>
					<view class="cuIcon-gift"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [
					// {
					//   id: 1,
					//   name: '品牌智能手环',
					//   points: 1999,
					//   image: '/static/goods/1.jpg'
					// },
					// {
					//   id: 2,
					//   name: '无线蓝牙耳机',
					//   points: 2999,
					//   image: '/static/goods/2.jpg'
					// },
					// {
					//   id: 3,
					//   name: '便携充电宝',
					//   points: 999,
					//   image: '/static/goods/3.jpg'
					// },
					// 更多商品数据...
				],
				_imgUrl: "",
				curPoints: 0,
				points: ''
			};
		},
		onLoad() {
			this._imgUrl = this.$base.url;
			Promise.all([this.getgoodsList(), this.getpoint()])
		},

		methods: {
			async getpoint() {
				try {
					let res = await this.$api.list("points", {
						userId: uni.getStorageSync("userInfo").userId,
					});
					if (res.code === 200) {
						if (res.rows.length > 0) {
							this.curPoints = res.rows[0].pointsValue
							this.points = res.rows[0]
						} else {
							this.curPoints = 0
						}
					}
				} catch (error) {}
			},
			async getgoodsList() {
				try {
					let res = await this.$api.list("goods", {
						goodsType: uni.getStorageSync("roles"),
					});
					if (res.code === 200) {
						this.goodsList = res.rows;
					}
				} catch (error) {}
			},
			async updatepoints(jiage) {
				try {
					let res = await this.$api.update("points", {
						id: this.points.id,
						pointsValue: this.curPoints - jiage,
					});
					if (res.code === 200) {
						// this.goodsList = res.rows;
					}
				} catch (error) {}
			},
			handleExchange(item) {
				let that = this
				uni.showModal({
					title: "确认兑换",
					content: `确定兑换 ${item.shangpinmingcheng}（${item.jiage}积分）吗？`,
					success: async (res) => {
						if (res.confirm) {
							if (item.jiage > that.curPoints) {
								uni.showToast({
									title: '积分不足',
									icon: 'error'
								})
								return
							}
							// 3.1 创建订单
							const orderParams = {
								// ...item,
								shangpinId: item.id,
								createBy: 'jifen',
								userId: uni.getStorageSync('userInfo').userId,
								name: item.shangpinmingcheng,
								photo: item.tupian,
								spNumber: 1,
								price: item.jiage
							};

							// 3.2 提交订单（等待订单创建成功）
							const createRes = await this.$api.add("order", orderParams);
							if (createRes.code == 200) {
								Promise.all([this.updatepoints(item.jiage), this.getgoodsList()]).then(() => {
									this.getpoint()
								})

								uni.showToast({
									title: '兑换成功'
								})
							}

						}
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.points-goods-page {
		background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
		min-height: 100vh;
		padding: 40rpx;
	}

	.page-header {
		// display: flex;
		// justify-content: space-between;
		margin-bottom: 48rpx;

		.title {
			font-size: 48rpx;
			font-weight: 600;
			color: #2d3748;
			position: relative;
		}

		.decor-line {
			height: 4rpx;
			width: 80rpx;
			background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
			margin-top: 16rpx;
		}
	}

	.goods-list {
		display: grid;
		// grid-template-columns: repeat(2, 2fr);
		gap: 24rpx;
	}

	.goods-card {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);
		position: relative;
	}

	.goods-image {
		width: 100%;
		height: 320rpx;
		background: #f1f3fe;
	}

	.goods-info {
		padding: 24rpx;

		.goods-name {
			font-size: 28rpx;
			color: #2d3748;
			font-weight: 500;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}

	.points-section {
		margin-top: 24rpx;
		display: flex;
		align-items: baseline;

		.points-text {
			font-size: 40rpx;
			color: #ff4757;
			font-weight: 700;
			margin-right: 12rpx;
		}

		.points-label {
			font-size: 24rpx;
			color: #718096;
		}
	}

	.exchange-btn {
		margin: 24rpx;
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-radius: 60rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 28rpx;
		transition: all 0.2s;

		&:active {
			transform: scale(0.96);
			opacity: 0.9;
		}

		.cuIcon-gift {
			font-size: 34rpx;
			margin-left: 12rpx;
		}
	}
</style>